<script lang="ts" setup>
import { computed } from "vue";

const props = withDefaults(defineProps<{ title?: string; border?: boolean }>(), {
  border: true,
});

const classNames = computed(() => {
  return {
    "umrp-card": true,
    "umrp-card-border": props.border,
  };
});
</script>

<template>
  <div :class="classNames">
    <slot name="title">
      <div class="title" v-if="title">
        {{ title }}
        <slot name="extra"></slot>
      </div>
    </slot>
    <slot name="cover"></slot>
    <slot name="body" v-if="$slots.body"></slot>
    <div class="body" v-else>
      <slot></slot>
    </div>
    <div class="footer" v-if="$slots.footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.umrp-card {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 4px;

  &-border {
    border: 1px solid #ebeef5;
  }

  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    font-weight: bold;
    border-bottom: 1px solid var(--border-color);
  }

  .body {
    padding: 16px;
  }

  .footer {
    display: flex;
    justify-content: flex-end;
    padding: 10px 16px;
    border-top: 1px solid var(--border-color);
  }
}
</style>
